<!--
 * @Author: your name
 * @Date: 2022-01-04 13:32:46
 * @LastEditTime: 2022-01-08 15:50:17
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /notion/new/today-shici.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>诗词卡片</title>
    <script src="../flexibleMerge.js"></script>
    <script src="../lib/jinrishici.js"></script>
    <script src="../lib/global.js"></script>
    <style type="text/css">
        html,
        body {
            background-color: #ffffff;
            font-size: .24rem;
        }

        .container {
            width: 100%;
        }

        .inner {
            width: 8rem;
            border-radius: .4rem;
            box-shadow: 0 0 0.4rem 0.066667rem rgba(0, 0, 0, 0.1);
            margin: 0.4rem auto;
            background: rgba(255, 255, 255,1);
            color: #333333;
        }

        .inner .header {
            padding: 0.666667rem 2rem;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #f3f3f3;
        }

        .inner .header em {
            display: inline-block;
            width: 0.4rem;
            height: 0.4rem;
            background-color: #333333;
            border-radius: 50%;
        }

        .inner .content {
            padding-bottom: .666667rem;
        }

        .inner .content .shici {
            padding: .666667rem;
            text-align: center;
            font-size: .96rem;
            font-family: STSong;
            font-weight: bold;
            display: flex;
            justify-content: center;
        }

        .inner .content .shici .note {
            width: .9rem;
            position: relative;
            line-height: 1;
        }

        .inner .content .shici .note::before,
        .inner .content .shici .note::after {
            content: '';
            width: 1.066667rem;
            height: 1px;
            background-color: #333333;
            transform: rotate(90deg);
            position: absolute;
        }

        .inner .content .shici .note-2 {
            padding-top: 2.666667rem;
            margin-right: .2rem;
        }

        .inner .content .shici .note-2::before {
            left: -0.533333rem;
            bottom: 4.8rem;
            transform: rotate(90deg);
            width: .733333rem;
        }

        .inner .content .shici .note-2::after {
            width: .533333rem;
            right: -1.2rem;
            bottom: 1.866667rem;
            transform: rotate(90deg);
        }

        .inner .content .shici .note-1::before {
            left: -1.066667rem;
            top: 1.6rem;
        }

        .inner .content .shici .note-1::after {
            width: .2rem;
            height: .2rem;
            border: 1px solid #333333;
            background-color: #ffffff;
            border-radius: 50%;
            top: 1.5rem;
            left: -0.666667rem;
        }

        .inner .content .date {
            text-align: center;
            font-size: .48rem;
        }

        .inner.black {
            background-color: #000000;
            color: #ffffff;
        }

        .inner.black .header {
            border-color: #ffffff;
        }

        .inner.black .header em {
            background-color: #ffffff;
        }

        .inner.black .content .note::before,
        .inner.black .content .note::after {
            background-color: #ffffff;
        }

        .inner.black .content .note-1::after {
            border-color: #ffffff;
            background-color: #000000;
        }
      html[theme="dark"], html[theme="dark"] body {background-color:#191919;}

        [v-cloak] {display: none;}
    </style>
</head>

<body>
    <div class="container wrapper" id="root" v-cloak>
        <div class="inner" :class="{black: mode === 'b'}">
            <div class="header"><em></em><em></em></div>
            <div class="content">
                <div class="shici">
                    <div class="note note-2">{{content[1] || ''}}</div>
                    <div class="note note-1">{{content[0]}}</div>
                </div>
                <div class="date">{{year}} / {{month}} / {{day}}</div>
            </div>
        </div>
    </div>
</body>

<script src="../lib/vue@2.js"></script>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
                mode: getQueryString('mode'),
                content: [],
                result: null,
                year: "",
                month: "",
                day: "",
            }
        },
        mounted() {
            const _this = this;
            jinrishici.load(function (result) {
                // 自己的处理逻辑
                let ctt = result.data.content;
                _this.result = result.data;
                ctt = ctt.replaceAll('。', '');
                _this.content = ctt.split("，");
            });
            let _today = new Date(),
                month,
                day;
            this.year = _today.getFullYear();
            (month = _today.getMonth() + 1), (day = _today.getDate());
            month = month > 9 ? month : `0${month}`;
            day = day > 9 ? day : `0${day}`;
            (_this.month = month), (_this.day = day);
        }
    })

</script>

</html>